<template>
  <div class="form">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="普通输入">
        <a-input v-model:value="formState.input" />
      </a-form-item>
      <a-form-item label="数字输入">
        <a-input v-model:value="formState.number" />
      </a-form-item>
      <a-form-item label="单选">
        <a-radio-group v-model:value="formState.radio">
          <a-radio :value="1">A</a-radio>
          <a-radio :value="2">B</a-radio>
          <a-radio :value="3">C</a-radio>
          <a-radio :value="4">D</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="下拉">
        <a-select
          ref="select"
          v-model:value="formState.select"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <!-- <a-select-option value="disabled" disabled>Disabled</a-select-option> -->
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="树形下拉">
        <a-tree-select
          v-model:value="formState.treeSelect"
          show-search
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="Please select"
          allow-clear
          tree-default-expand-all
          :tree-data="treeData"
          tree-node-filter-prop="label"
        >
          <template #title="{ value: val, label }">
            <b v-if="val === 'parent 1-1'">sss</b>
            <template v-else>{{ label }}</template>
          </template>
        </a-tree-select>
      </a-form-item>

      <a-form-item label="日期选择">
        <a-date-picker show-time placeholder="选择日期" v-model:value="formState.date"/>
      </a-form-item>
      <a-form-item label="日期范围选择">
        <a-range-picker
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          :placeholder="['开始时间', '结束时间']"
          @change="onRangeChange"
          @ok="onRangeOk"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">Create</a-button>
        <a-button style="margin-left: 10px">Cancel</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
import { reactive, toRaw } from 'vue'
const formState = reactive({
  input: '输入框',
  number: 10,
  radio: 1,
  select: 'jack',
  treeSelect: '',
  date: ''
})

const treeData = ref([
  {
    label: 'root 1',
    value: 'root 1',
    children: [
      {
        label: 'parent 1',
        value: 'parent 1',
        children: [
          {
            label: 'parent 1-0',
            value: 'parent 1-0',
            children: [
              {
                label: 'my leaf',
                value: 'leaf1',
              },
              {
                label: 'your leaf',
                value: 'leaf2',
              },
            ],
          },
          {
            label: 'parent 1-1',
            value: 'parent 1-1',
          },
        ],
      },
      {
        label: 'parent 2',
        value: 'parent 2',
      },
    ],
  },
])
const onSubmit = () => {
  console.log('submit!', toRaw(formState))
}
const labelCol = {
  style: {
    width: '150px',
  },
}
const wrapperCol = {
  span: 14,
}
</script>

<style scoped lang="scss">
.form {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
}
</style>
